<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>{{ titleText}}</span>
        </div>
        <el-form ref="form" :model="form" :rules="formRules" label-width="120px" inline-block>
          <el-form-item label="学科：" prop="subjectID">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              style="width: 400px"
              @focus="getSubjects"
            >
              <el-option
                :label="item.subjectName"
                :value="item.id"
                v-for="(item, index) in subjectsList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="catalogID">
            <el-select
              v-model="form.catalogID"
              placeholder="请选择"
              style="width: 400px"
              @focus="getCatalog"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in catalogList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select
              v-model="form.enterpriseID"
              placeholder="请选择"
              style="width: 400px"
              @focus="getEnterprises"
            >
              <el-option
                :label="item.shortName"
                :value="item.id"
                v-for="(item, index) in enterpriseList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <!-- 城市 -->
          <el-form-item label="城市：" label-width="120px" prop="city">
            <el-select
              placeholder="请选择"
              style="width: 195px"
              v-model="form.province"
              @focus="getCitys"
              @change="ccc"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in cityList"
                :key="index"
              />
            </el-select>
            <img style="width: 10px"> 
            <!-- <transition name="slide-fade">
    <span :class="{alertCity: form.province}" v-if="alertCity">请选择地区</span>
</transition> -->
            </img style="width:20px">
            <el-select
              placeholder="请选择"
              style="width: 195px"
              v-model="form.city"
              @focus="getArea(form.province)"
              @change='ddd'
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in areaList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="方向：" prop="direciton">
            <el-select
              v-model="form.direction"
              placeholder="请选择"
              style="width: 400px"
              @focus="getDirections"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in directionList"
                :key="index"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="questionType" >
            <el-radio-group v-model="form.questionType" @change="aaa">
              <el-radio
                :label="item.value"
                v-for="(item, index) in constant.questionType"
                :key="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="form.difficulty" @change="aaa">
              <el-radio
                :label="item.value"
                v-for="(item, index) in constant.difficulty"
                :key="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <!-- 题干 -->
          <el-form-item label="题干：" prop="question">
            <quill-editor
              class="myQuillEditor"
              ref="myQuillEditor"
              v-model="form.question"
              :options="editorOption"
            />
          </el-form-item>
          <!-- 单选切换 -->
          <div class="selectQure" v-if="form.questionType !== 3">
            <span class="selectTitle">选项：</span>
            <div
              class="mult"
              v-for="(item, index) in form.options"
              :key="index"
            >
            <!-- 单选 -->
              <el-form-item label=" " v-if="form.questionType == 1">
                <el-radio-group v-model="item.isRight" @change="bbb(item)">
                  <el-radio :label="true">{{ item.code + ":" }}</el-radio>
                </el-radio-group>
              </el-form-item>
<!-- 多选 -->
              <el-form-item label=" " v-if="form.questionType == 2">
                <el-checkbox
                  :label="item.code + ':'"
                  name="type"
                  v-model="item.isRight"
                  @change="aaa"
                />
              </el-form-item>
              <el-form-item>
                <el-input v-model="item.title" style="width: 240px" />
              </el-form-item>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="item.img" :src="item.img" class="avatar" />
                <span class="avatar-uploader-icon"
                  >上传图片
                  <i class="el-icon-circle-close"></i>
                </span>
              </el-upload>
            </div>
          </div>
          <!-- 答案解析 -->
          <el-form-item label=" ">
            <el-button
              type="danger"
              :disabled="form.questionType != 2"
              size="small"
              @click="addChoice"
              >+增加选项与答案</el-button
            >
          </el-form-item>
          <el-form-item label="解析视频：" >
            <el-input v-model="form.videoURL" style="width: 400px" />
          </el-form-item>
          <!-- 答案解析 -->
          <el-form-item label="答案解析：" prop="answer" >
            <quill-editor
              class="myQuillEditor"
              ref="myQuillEditor"
              v-model="form.answer"
              :options="editorOption"
            />
          </el-form-item>

          <el-form-item label="题目备注" >
            <el-input
              type="textarea"
              v-model="form.remarks"
              style="width: 400px; heigth: 100px"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题标签：" prop="tags">
            <el-select
              v-model="form.tags"
              placeholder="请选择试题标签"
              style="width: 400px"
              @focus="getTags"
            >
              <el-option
                :label="item.tags"
                value="item.tags"
                v-for="(item, index) in tagList"
                :key="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="submit" v-if="editObj.id">确认修改</el-button>
            <el-button type="primary" @click="submit" v-else>确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  // [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  ["image", 'link'] // 链接、图片、视频-----['link', 'image', 'video']
]

import { list } from '@/api/hmmm/subjects.js'
import * as directorysApi from '@/api/hmmm/directorys.js'
import * as companysApi from '@/api/hmmm/companys.js'
import * as cityApi from '@/api/hmmm/citys.js'
import * as constant from '@/api/hmmm/constants.js'
import * as questionsApi from '@/api/hmmm/questions.js'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      editObj: {
        id: '',  // 修改文章，获取的路由中的id
        isNext: true
      },
      alertCity: false, // 控制城市提示框
      tagList: [],
      directionList: [],
      constant, // 一些接口文档中的常量
      areaList: [],
      cityList: [],
      enterpriseList: [],
      subjectsList: [],
      catalogList: [],
      formRules: {
        subjectID: [{ required: true, trigger: 'blur', message: '请选择学科' }],
        catalogID: [{ required: true, trigger: 'blur', message: '请选择目录' }],
        enterpriseID: [{ required: true, trigger: 'blur', message: '请选择企业' }],
        province: [{ required: true, trigger: 'change', message: '请选择城市' }],
        city: [{ required: true, trigger: 'change', message: '请选择地区' }],
        direction: [{ required: true, trigger: 'blur', message: '请选择方向' }],
        question: [{ required: true, trigger: 'blur', message: '请选择题干' }],
        answer: [{ required: true, trigger: 'blur', message: '请选择答案解析' }]
      },
      form: {
        answer: '',
        catalogID: '',
        city: '',
        difficulty: 1,
        direction: '',
        enterpriseID: '',
        options: [{ isRight: true, code: 'A', title: '', img: '' }, { isRight: false, code: 'B', title: '', img: '' }, { isRight: false, code: 'C', title: '', img: '' }, { isRight: false, code: 'D', title: '', img: '' }],
        province: '',
        question: '',
        questionType: 1,
        remarks: '',
        subjectID: '',
        tags: '',
        videoURL: ''
      },
      // content: ``, // 富文本编辑器默认内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          //工具栏定义的
          toolbar: toolbarOptions
        },
        //主题
        theme: "snow",
        placeholder: "请输入正文"
      }
    }
  },
  created () {
    this.$nextTick(async () => {
      this.editObj.id = Number(this.$route.query.id)
      if (this.editObj.id) {
        const { data } = await questionsApi.detail(this.editObj)
        this.form = data
        // 转化困难度
        if (this.form.difficulty.length == 1) {
          this.form.difficulty = Number(this.form.difficulty)
        } else {
          if (this.form.difficulty == '简单') {
            this.form.difficulty = 1
          } else if (this.form.difficulty == '一般') {
            this.form.difficulty = 2
          } else {
            this.form.difficulty = 3
          }
        }
        // 转化题型
        if (this.form.questionType.length == 1) {
          this.form.questionType = Number(this.form.questionType)
        } else {
          if (this.form.questionType == '单选') {
            this.form.questionType = 1
          } else if (this.form.questionType == '多选') {
            this.form.questionType = 2
          } else {
            this.form.questionType = 3
          }
        }
        // 转化isRight
        this.form.options.forEach(item => {
          if (item.isRight == 1) {
            item.isRight = true
            return item
          }
        })
      }
    })
  },
  computed: {
    titleText () {
      return this.editObj.id ? '试题修改' : '试题录入'
    }
  },
  methods: {
    aaa (s) {
    },
    bbb (item) {
      this.form.options.forEach(key => {
        key.isRight = false
      })
      item.isRight = true
    },
    addChoice () {
      // code :this.form.options.length+64对应的acsii值 String.fromCharCode(num)
      this.form.options.push({ isRight: false, code: String.fromCharCode(this.form.options.length + 65), title: '', img: '' })
    },
    uploadImg () {
      this.$refs.file.click()
    },
    async getSubjects () {
      const { data } = await list()
      this.subjectsList = data.items
    },
    async getCatalog () {
      const { data } = await directorysApi.directorysSimple()
      this.catalogList = data
    },
    async getEnterprises () {
      const { data } = await companysApi.list()
      this.enterpriseList = data.items
    },
    async getCitys () {
      this.cityList = await cityApi.provinces()
    },
    ccc (value) {
      this.alertCity = true
      this.form.city = ''
      this.getArea(value)
    },
    async getArea (city) {
      this.areaList = await cityApi.citys(city)
    },
    ddd () {
      this.alertCity = false
    },
    async getTags () {
      const { data } = await questionsApi.list()
      this.tagList = data.items
    },
    getDirections () {
      this.directionList = this.constant.direction
    },
    // 提交
    async submit () {
      this.form.questionType = String(this.form.questionType)
      this.form.difficulty = String(this.form.difficulty)
      console.log(this.form)
      try {
        await this.$refs.form.validate()
        if (this.editObj.id) {
          await questionsApi.update({ ...this.form, id: this.editObj.id })
        } else {
          await questionsApi.add(this.form)
        }
        this.$refs.form.resetFields()
        this.$message.success('操作成功')
        this.$router.back()
      } catch (err) {
        this.$message.warning('请将内容填写完整')
      }
    },
    handleAvatarSuccess (res, file) {
    },
    beforeAvatarUpload () { }
  },

}
</script>

<style scoped lang='scss'>
.btn {
  display: inline-block;
  position: absolute;
  height: 60px;
  top: -12px;
  left: 420px;
}
.myButton {
  background-color: #fff;
  width: 100px;
  height: 60px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}
.selectQure {
  position: relative;
  .selectTitle {
    position: absolute;
    left: 65px;
    top: 10px;
    font-weight: 700;
    color: #606266;
    font-size: 14px;
  }
}

.mult {
  position: relative;
  ::v-deep .el-form-item {
    // background-color: red;
    display: inline-block;
    width: 50px;
  }
}
.el-icon-circle-close {
  position: absolute;
  top: -7px;
  right: -7px;
  color: #999;
  background-color: #fff;
}
.myQuillEditor {
  height: 236px;
  margin-bottom: 60px;
}
::v-deep .el-textarea__inner {
  height: 100px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
  position: relative;
}
.avatar-uploader-icon {
  position: absolute;
  top: -10px;
  left: 420px;
  border: 1px dashed #ccc;
  border-radius: 5px;
  font-size: 14px;
  color: #000;
  width: 100px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
